<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="container">
        <!-- 中间-工作区 -->
        <CenterView v-if="centerFrameInfo === 1">
            <template v-slot:downView>
                <div class="h_list_horizontal" @dblclick.stop="onLayoutHandel('DownFold')">
                    <div class="h_flex_row_center" v-for="item in downNavigation">
                        <div class="navigation_button" @click="onLayoutHandel(item)"
                            :class="[item.frameActive ? 'h_active' : '']" v-show="item.labelShow">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
                <!-- 下部框 -->
                <div class="down_frame" :style="{ height: downFrameInfo.range + 'px', width: '100%', }"
                    v-if="downFrameInfo.fold">
                    <DownProject v-if="onGetDownFrameActive('DownProject')"></DownProject>
                    <DownPage v-if="onGetDownFrameActive('DownPage')"></DownPage>
                    <DownCanvas v-if="onGetDownFrameActive('DownCanvas')"></DownCanvas>
                    <DownPenContainer v-if="onGetDownFrameActive('DownPenContainer')"></DownPenContainer>
                    <DownBlockGroup v-if="onGetDownFrameActive('DownBlockGroup')"></DownBlockGroup>
                    <DownPelAttr v-if="onGetDownFrameActive('DownPelAttr')"></DownPelAttr>
                    <DownLogs v-if="onGetDownFrameActive('Downlogs')"></DownLogs>
                </div>
            </template>
        </CenterView>
        <CenterPelData v-if="centerFrameInfo === 2">
            <!--页面切换 -->
            <template v-slot:pageChange>
                <div class="navigation_list">
                    <div class="list_bar_tag h_h_overflow">
                        <div class="navigation_button" v-for="Item in pages"
                            :class="[pageKey === Item.key ? 'h_active' : '']" @click="onSetCurrentPage(Item.key)">
                            {{ Item.label }}
                        </div>
                    </div>
                </div>
            </template>
        </CenterPelData>
        <CenterEquipData v-if="centerFrameInfo === 4"></CenterEquipData>
    </div>
</template>

<script setup  lang="ts">
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
    onLayoutHandel,          // 布局处理器
    // 🌱  动态显示
    onShowSelected, // 选中显示
    onUpdataHtml,
    onPelDelete,
    onUpdataPelAnInfo, // 动画-更新图元动画
    onUpdataPelAttrs, // 更新-图元属性
    onUpdataPelEventInfo, // 更新_事件参数
    onSetGridSize, //设置格栅尺寸
    onPageSizeAndUnit, //更改画布单位及页面尺寸
    saveCanvasToProject, //转储-从_画布存储_到_工程存储
    onSetCurrentPage,
} from "@/functions";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🍁 引入组件 
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🍁  中
import { CenterView } from "../CenterView";
import { CenterPelData } from "@/views/svg/CenterPelData";
import { CenterEquipData } from "@/views/svg/CenterEquipData";
// 🍁  下
import { DownProject } from "../DownProject";
import { DownPage } from "../DownPage";
import { DownCanvas } from "../DownCanvas";
import { DownPenContainer } from "../DownPenContainer";
import { DownBlockGroup } from "../DownBlockGroup";
import { DownPelAttr } from "../DownPelAttr";
import { DownLogs } from "../DownLogs";

/**🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾*/
// 🐸 引入存储
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useProjectStore } from "@/store/projectStore"; // 工程
import { useLayoutStore } from "@/store/layoutStore"; // 布局
import { useWorkStore } from "@/store/workStore"; // 工作数据
/**🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾*/
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/**👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾*/
// 🐸 使用存储
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const projectStore = useProjectStore(); // 工程
const layoutStore = useLayoutStore(); // 布局
const workStore = useWorkStore(); // 设备数据
/**👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾*/
/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
/** 中间框参数 0,1,2*/
let centerFrameInfo = computed(() => layoutStore.centerFrameInfo);
/** 下框参数*/
let downFrameInfo = computed(() => layoutStore.downFrameInfo);
/** 下框列表*/
let downNavigation = computed(() => layoutStore.downNavigation);
/** 页面 */
const pages = computed(() => projectStore.pages);
/** 页面键 */
const pageKey = computed(() => projectStore.pages[projectStore.pageIndex].key);
/* ================================================================================================ */
//                                ★ 函数
/* ================================================================================================ */
/** 获取下框激活状态*/
const onGetDownFrameActive = (key: string): boolean => {
    // console.log("获取下框激活状态")
    let res = false;
    let downNavigation = layoutStore.downNavigation;
    downNavigation.forEach((element: any) => {
        if (element.key === key) {
            res = Boolean(element.frameActive);
        }
    });
    return res;
};
/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */


</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.down_frame {
    width: 100%;
    max-height: 300px;
}

/* 水平导航列表 */
.h_list_horizontal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0px;
    padding: 0px;
    max-height: 26px;
    width: 100%;
    user-select: none;
    background-color: rgb(0, 0, 0);

    // 水平导航按钮
    .navigation_button {
        margin-left: 10px;
        margin-right: 10px;
        padding: 0px;
        width: 70px;
        height: 24px;
        font-size: medium;
        text-align: center;
        background-color: rgb(50, 50, 50);
        color: rgb(218, 218, 218);
        border-bottom: 3px solid rgb(0, 0, 0);
        cursor: pointer; // 小手指

        &:hover {
            color: rgb(255, 255, 255);
            border-bottom: 3px solid rgb(0, 0, 255);
        }

        &.h_active {
            background-color: rgb(80, 80, 80);
            color: rgb(0, 0, 0);
            border-bottom: 3px solid #1d9f00;
        }
    }

    &:hover {
        cursor: s-resize; //箭头↕
    }
}

/* 导航列表 */
.navigation_list {
    margin: 0px;
    padding: 0px;
    height: 40px;
    width: 100%;
    user-select: none;
    background-color: rgb(0, 0, 0);
    display: flex;
    flex-direction: row;
    justify-content: start;

    // 列表条标签
    .list_bar_tag {
        margin: 0px;
        padding: 0px;
        height: 40px;
        width: 60vw;
        user-select: none;
        background-color: rgb(0, 0, 0);
        display: flex;
        flex-direction: row;
        justify-content: start;
    }

    // 水平导航按钮
    .navigation_button {
        margin-left: 0px;
        margin-right: 3px;
        padding: 0px;
        min-width: 70px;
        height: 26px;
        font-size: medium;
        text-align: center;
        background-color: rgb(80, 80, 80);
        color: rgb(218, 218, 218);
        border-bottom: 3px solid rgb(80, 80, 80);
        cursor: pointer; // 小手指

        &:hover {
            color: rgb(0, 0, 0);
        }

    }

    // 激活
    .h_active {
        background-color: rgb(118, 118, 118);
        color: rgb(0, 0, 0);
        border-bottom: 3px solid #1d9f00;
    }

}</style>